<script setup>
import PageContainer from '@/components/container/PageContainer.vue'
import MonthlyDoctorRanking from './components/MonthlyDoctorRanking.vue'
import PeriodontalWordCloud from './components/PeriodontalWordCloud.vue'
import TodayPeriodontalPatients from './components/TodayPeriodontalPatients.vue'
import TreatmentTimeStatistics from './components/TreatmentTimeStatistics.vue'
</script>

<template>
  <PageContainer class="home-page" title="数据总览">
    <div class="chart-container-wrapper">
      <monthly-doctor-ranking class="chart-container" />
      <periodontal-word-cloud class="chart-container" />
      <today-periodontal-patients class="chart-container" />
      <treatment-time-statistics class="chart-container" />
    </div>
  </PageContainer>
</template>

<style lang="scss" scoped>
.home-page {
  // 设置flex布局
  display: flex;
  flex-direction: column;
  height: 85vh;
  width: 100%;
}

.chart-container-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr; /* 每行显示两个图表 */
  gap: 20px; /* 图表之间的间距 */
  padding: 20px;
}
</style>
